import React, { useState, useEffect } from "react";
import "./index.scss";
interface XtxBreadProps {
  children: React.ReactNode;
}

function XtxBread(props: XtxBreadProps) {
  const [dynamicItems, setDynamicItems] = useState<React.ReactNode[]>([]);

  useEffect(() => {
    const items = React.Children.toArray(props.children); // 将 children 转换为数组
    const breadcrumbItems: React.ReactNode[] = [];

    items.forEach((item, i) => {
      breadcrumbItems.push(item);
      // 只在非最后一个 item 后面添加分隔符
      if (i < items.length - 1) {
        breadcrumbItems.push(
          <i key={`separator-${i}`} className="iconfont icon-angle-right"></i>
        );
      }
    });

    setDynamicItems(breadcrumbItems);
  }, [props.children]); // 只有当 children 改变时才更新

  return <div className="xtx-bread">{dynamicItems}</div>;
}

export default XtxBread;
